<template>
  <div class="app-container">
    <el-card :body-style="{ padding: '10px' }">
      <el-form
        label-position="left"
        label-width="68px"
        class="search-form-statistic"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="标签类型:" style="margin-bottom: 0 !important" label-width="100px">
              <el-select v-model="listQuery.labelType" placeholder="请选择">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.name"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="规则:" style="margin-bottom: 0 !important">
             <el-select
              v-model="listQuery.rule"
              clearable
              filterable
              remote
              reserve-keyword
              placeholder="请输入规则"
              :remote-method="remoteMethod"
              :loading="ruleLoading">
              <el-option
                v-for="item in ruleOptions"
                :key="item.id"
                :label="item.rule"
                :value="item.rule">
              </el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button
              class="filter-item"
              type="primary"
              @click.native="search"
            >
              查询
            </el-button>
          </el-col>
          <el-col :span="2">
            <el-button class="filter-item" @click.native="resetSearch">
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
      <el-row :style="{marginTop:'20px'}">
          <el-card :body-style="{padding:'10px'}">
              <div slot="header" class="clearfix">
                  <el-button class="filter-item" type="success" icon="el-icon-plus"  @click.native="addNew">新增</el-button>
                     <el-button class="filter-item" type="danger" icon="el-icon-delete"  @click.native="delList">删除</el-button>
                   <el-button class="filter-item" type="primary" icon="el-icon-check"  @click.native="toggleOn">启用</el-button>
                    <el-button class="filter-item" type="danger" icon="el-icon-close" @click.native="toggleDown">停用</el-button>
              </div>
               <div class="card-body">
                    <el-table stripe
                      :data="tableList" v-loading="tableLoading" element-loading-text="加载中..."
                      border
                      fit
                      style="width: 100%"
                      id="out-table"
                      @selection-change="handleSelectionChange"
                    >
                         <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column align="center" label="标签类型"  width="120">
                          <template slot-scope="scope">
                               <span v-if="scope.row.type==='stock'">股票属性</span>
                               <span v-if="scope.row.type==='industry'">行业属性</span>
                               <span v-if="scope.row.type==='theme'">主题属性</span>
                               <span v-if="scope.row.type==='people'">人物属性</span>
                          </template>
                        </el-table-column>
                            <el-table-column
                                label="规则"
                                align="center"
                                prop="rule"
                                >
                            </el-table-column>
                            <el-table-column
                                label="匹配位置"
                                align="center"
                                >
                                <template slot-scope="scope">
                                  <span>{{scope.row.pos|filterPos}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="example"
                                label="样例"
                               >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="remark"
                                label="备注"
                                >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="state"
                                label="状态"
                                width="80">
                                <template slot-scope="scope">
                                    <span>{{scope.row.state?'停用':'启用'}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="creator"
                                label="创建人"
                                width="80">
                            </el-table-column>
                            <el-table-column
                                prop="updater"
                                label="更新人"
                                align="center"
                                width="120">
                            </el-table-column>
                             <el-table-column
                                prop="createTime"
                                label="创建时间"
                                align="center"
                                width="160">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="updateTime"
                                label="更新时间"
                                width="160">
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                width="150"
                                align="center"
                                class-name="small-padding fixed-width"
                                >
                                 <template slot-scope="scope">
                                   <el-tooltip content="编辑" placement="top">
                                    <el-button
                                    class="button-icon el-icon-edit"
                                     type="primary" size="mini" @click="handleUpdate(scope.row)"
                                    ></el-button>
                                    </el-tooltip>
                                    <el-tooltip content="删除" placement="top">
                                    <el-button
                                     class="button-icon el-icon-delete"
                                     type="danger" size="mini"
                                    @click="handleDel(scope.row)"
                                    ></el-button>
                                    </el-tooltip>
                                </template>
                            </el-table-column>

                    </el-table>
                        <div class="pagination-container">
                        <el-pagination
                            background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page.sync="listQuery.pageNum"
                            :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="total"
                        >
                        </el-pagination>
                    </div>
               </div>
          </el-card>
      </el-row>
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="diaglogFlag" width="800px">
            <el-form
                :rules="rules" ref="dataForm" :model="formData" label-position="left" label-width="130px"
                style='margin: 24px;'
            >
                <el-form-item label="标签类型" prop="labelType">
                    <el-select v-model="formData.labelType" placeholder="请选择">
                        <el-option
                        v-for="item in formTypeOptions"
                        :key="item.name"
                        :label="item.name"
                        :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="匹配位置" prop="pos">
                  <el-select v-model="formData.pos" placeholder="请选择">
                        <el-option
                        v-for="item in positionOptions"
                        :key="item.name"
                        :label="item.name"
                        :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="规则" prop="rule">
                   <!-- <el-select
                    v-model="formData.rule"
                    clearable
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入规则"
                    :remote-method="remoteMethod"
                    :loading="ruleLoading">
                    <el-option
                      v-for="item in ruleOptions"
                      :key="item.id"
                      :label="item.rule"
                      :value="item.rule">
                    </el-option>
                  </el-select> -->
                   <el-input placeholder="请输入" clearable v-model="formData.rule"></el-input>
                </el-form-item>
                <el-form-item label="样例" prop="template">
                   <el-input placeholder="请输入" clearable v-model="formData.template"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                   <el-input placeholder="请输入" clearable v-model="formData.remark"></el-input>
                </el-form-item>
                 <el-form-item label="状态" prop="status">
                   <el-switch
                    v-model="formData.status"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="diaglogFlag = false">{{$t('table.cancel')}}</el-button>
                <el-button v-if="dialogStatus==='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
                <el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="delDialogFlag"
            width="30%"
           >
            <h3>您确定删除数据吗?</h3>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delDialogFlag = false">取 消</el-button>
                <el-button type="primary" @click="confirmDel">确 定</el-button>
            </span>
        </el-dialog>
  </div>
</template>

<script>
import {
 getRuleList,
 getLabelDissambiguationList,
 startLabelDissambiguation,
  delLabelDissambiguationList,
  saveLabelDissambiguationForm,
  updateLabelDissambiguationForm} from '@/api/labelDisambiguation'
export default {
  data() {
    return {
      listQuery: {
        labelType: "",
        rule: "",
        pageNum: 1,
        pageSize: 10,
      },
      typeOptions: [
        {
          value: "",
          name: "全部",
        },
        {
          value: "stock",
          name: "股票属性",
        },
        {
          value: "industry",
          name: "行业属性",
        },
        {
          value: "theme",
          name: "主题属性",
        },
        {
          value: "people",
          name: "人物属性"
        }
      ],
      positionOptions:[{
        name:"标题",
        value:'1'
      },{
        name:"正文全文",
        value:'2'
      },{
        name:"正文开头",
        value:'3'
      },{
        name:"正文结尾",
        value:'4'
      },{
        name:"正文开头+正文结尾",
        value:'5'
      },{
        name:"标题+正文全文",
        value:'6'
      },{
        name:"标题+正文开头",
        value:'7'
      },{
        name:"标题+正文结尾",
        value:'8'
      },{
        name:"标题+正文开头+正文结尾",
        value:'9'
      }],
      tableLoading: false,
      total: 0,
      tableList:[{a:""}],
      diaglogFlag:false,
      formData:{
          id:'',
          labelType:'',
          rule:'',
          template:'',
          remark:'',
          status:true  ,
          pos:''
      },
      formTypeOptions:[
        {
          value: "stock",
          name: "股票属性",
        },
        {
          value: "industry",
          name: "行业属性",
        },
        {
          value: "theme",
          name: "主题属性",
        },
        {
          value: "people",
          name: "人物属性"
        }
      ],
      rules:{
          labelType: [{ type: 'string', required: true, message: '请选择...', trigger: 'change' }],
          rule: [{ type: 'string', required: true, message: '请输入...', trigger: 'change' }],
          template: [{ type: 'string', required: true, message: '请输入...', trigger: 'change' }],
          pos: [{ type: 'string', required: true, message: '请选择...', trigger: 'change' }],
      },
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dialogStatus:'create',
      delDialogFlag:false,
      delData:[],
      multipleSelection:[],
      ruleLoading:false,
      ruleOptions:[]
    };
  },
  methods: {
    remoteMethod(name){

      getRuleList({'rule':name}).then(res=>{
          let list = Array.isArray(res.Data)?res.Data:[];
          this.ruleOptions = [...list];
      }).catch(err=>{
        console.log(err);
      })
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    search() {
      let params = {
        type: this.listQuery.labelType,
        rule: this.listQuery.rule,
        pageSize: this.listQuery.pageSize,
        pageNum: this.listQuery.pageNum,
      };
      this.tableLoading = true;
      getLabelDissambiguationList(params)
        .then((res) => {
          this.tableList = Array.isArray(res.Data) ? res.Data : [];
          this.tableLoading = false;
          this.total = parseInt(res.PageInfo.Total);
        })
        .catch((err) => {
          this.tableLoading = false;
        });
    },
    resetSearch(){
        this.listQuery = {
            labelType: "",
            state: "",
            pageNum: 1,
            pageSize: 10
        }
        this.search();
    },
    handleSizeChange(val){
        this.listQuery.pageSize = val;
        this.search()
    },
    handleCurrentChange(val){
        this.listQuery.pageNum = val;
        this.search()
    },
    addNew(){
        this.dialogStatus = 'create'
        this.diaglogFlag = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
    },
    toggleOn(){
        let list = [...this.multipleSelection]
        if(list.length==0){
            this.$message.warning('请选择一行数据!')
            return;
        }

        let ids = list.map(val=>{
            return val.id;
        })
        // ids = ids.join(',')

        let params = {
          ids:ids,
          state:0
        }

        startLabelDissambiguation(params).then(res=>{
            this.$message.success('开启成功!')
            this.search();
        }).catch(err=>{
             this.$message.error('开启失败!')
        })
    },
    toggleDown(){
        let list = [...this.multipleSelection]
        if(list.length==0){
            this.$message.warning('请选择一行数据!')
            return;
        }

        let ids = list.map(val=>{
            return val.id;
        })
        // ids = ids.join(',')

        let params = {
          ids:ids,
          state:1
        }
        startLabelDissambiguation(params).then(res=>{
            this.$message.success('停用成功!')
            this.search();
        }).catch(err=>{
             this.$message.error('停用失败!')
        })
    },
    delList(){
        let list = [...this.multipleSelection]
        if(list.length==0){
            this.$message.warning('请选择一行数据!')
            return;
        }
        this.delData = [...list];
        this.delDialogFlag = true;
    },
    confirmDel(){
        this.delDialogFlag = false;
        let tempList = [...this.delData]
        let ids = tempList.map(val=>{
            return val.id;
        })
        // ids = ids.join(',');
        let  params = {
          ids:ids
        }
        delLabelDissambiguationList(params).then(res=>{
            this.$message.success('删除成功');
            this.search();
        }).catch(err=>{
            this.$message.error('删除失败');
        })
    },
    handleUpdate(val){
        this.dialogStatus = 'update'
        this.formData = {
          id:val.id,
          labelType:val.type,
          rule:val.rule,
          template:val.example,
          remark:val.remark,
          status:val.state?false:true,
          pos:val.pos+''
        }
        this.remoteMethod(val.rule);
        this.diaglogFlag = true
    },
    handleDel(val){
       this.delData = [{...val}];
       this.delDialogFlag = true;
    },
    saveFormData(){
        let params = {
          "type":this.formData.labelType,
          "state": this.formData.status?0:1,
          "rule": this.formData.rule,
          "remark": this.formData.remark,
          example:this.formData.template,
          "pos":this.formData.pos
        }

        saveLabelDissambiguationForm(params).then(res=>{
            this.$message.success('新增成功');
            this.diaglogFlag = false;
            this.search()
        }).catch(err=>{
            this.$message.error('新增失败');
        })
    },
    createData(){
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
                this.saveFormData();
            }
          })
    },
     updateFormData(){
       if(!this.formData.id){
         this.$message.marning('当前表单没有ID！')
         return false;
       }

       if(this.formData.pos==0){
         this.$message.warning('请选择待选的 【匹配位置】 数据!');
         return false;
       }
        let params = {
          id:this.formData.id,
          "type":this.formData.type,
          "state": this.formData.status?0:1,
          "rule": this.formData.rule,
          "remark": this.formData.remark,
          example:this.formData.template,
          "pos":this.formData.pos
        }

        updateLabelDissambiguationForm(params).then(res=>{
            this.$message.success('更新成功');
            this.search()
            this.diaglogFlag = false;
        }).catch(err=>{
            this.$message.error('更新失败');
        })
    },
    updateData(){
         this.$refs['dataForm'].validate((valid) => {
            if (valid) {
                this.updateFormData();
            }
         })
    }
  },
  mounted() {},
  created(){
    this.search();
  },
  filters:{
    filterPos(val){

      let name = '';
      switch(val){
        case 1:
          name = '标题';
          break;
        case 2:
          name = '正文全文';
          break;
        case 3:
          name = '正文开头';
          break;
        case 4:
          name = '正文结尾';
          break;
        case 5:
          name = '正文开头+正文结尾';
          break;
        case 6:
          name = '标题+正文全文';
          break;
        case 7:
          name = '标题+正文开头';
          break;
        case 8:
          name = '标题+正文结尾';
          break;
        case 9:
          name = '标题+正文开头+正文结尾';
          break;
        default:
          name = '暂无';
      }

      return name;
    }
  }
};
</script>

<style>
</style>
